<template>
  <div class="articaldetail">
    <myheader>
      <div slot="left">
        <van-icon
          name="arrow-left"
          @click="$router.back()"
          slot="left"
        ></van-icon>
      </div>
      <van-icon name="ellipsis" size="40" slot="right" @click="share" />
    </myheader>
    <div class="detail">
      <div class="title">{{ obj.title }}</div>
      <div class="desc">
        <span>{{ obj.nickname }}</span> &nbsp;&nbsp;
        <van-image
          round
          width="30"
          height="30"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <span>{{ obj.create_time | date_dayformat }}</span>
      </div>
      <div class="content" v-html="obj.content"></div>

      <van-divider :style="{ height: '5px' }" />
      <van-share-sheet
        v-model="showShare"
        title="分享给好友"
        :options="options"
        @select="onSelect"
      />
    </div>
  </div>
</template>

<script>
import myheader from "@/components/header.vue";
import { Toast } from "vant";
export default {
  data() {
    return {
      page:-1,
      obj: {
        nickname: " 张伟荣",
        content: ``,
        title: "高脂血症的食疗调养",
        create_time:'2012'
      },

      //分享框
      showShare: false,
      // 分享数组
      options: [
        [
          { name: "微信", icon: "wechat" },
          { name: "微博", icon: "weibo" },
          { name: "收藏", icon: "poster" },
          { name: "点赞", icon: "poster" },
        ],
      ],
      content: "",
      onoff: true,
      v: {
        user: {},
      },
    };
  },
  components: {
    myheader,
  },
  filters: {
    date_dayformat() {},
    relativeformat() {},
  },
  mounted() {
    setTimeout(() => {
      window.scrollTo(0, 0);
    }, 0);

      this.page=this.$route.params.id;
    this.postarticaldetail(this.page).then((res) => {
      this.obj = res.data.result;
    });
  },
  methods: {
    getlike() {},
    async postarticaldetail(id) {
      return await this.$http.get(`/article/${id}`);
    },
    //取消按钮事件
    cancel() {
      this.content = "";
      //给父组件触底了事件,告知我这边取消了
      //子组件中props中获取的数据不能进行修改,所以只能传递事件回去父组件进行间接修改数据
      this.$emit("mycancel");
    },

    //打开分享窗口
    share() {
      this.showShare = !this.showShare;
    },

    async collect(UserArt) {
      return await this.$http.post(
        '/user/collect',UserArt
      );
    },
    onSelect(option, index) {
      switch (index) {
        case 2:
          let hasuserlogin = localStorage.getItem("user");
          if (hasuserlogin) {
            let user={
              user_id :hasuserlogin,
              article_id:this.page
            }
            this.collect(user).then((res) => {
              if (res.data.code === 200) {
                Toast.success("收藏成功");
              } else {
                Toast.success("收藏失败");
              }
            });
          } else {
            Toast.success("请先登录");
          }
          this.showShare = false;
          break;
        case 3:
          Toast.success("点赞成功");
          this.showShare = false;
          break;
        default:
          Toast.success("点赞成功");
          this.showShare = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.articaldetail {
  background-color: #fff;
}
.oncom {
  width: 100%;
  border-top: 1px solid #ccc;
  text-align: center;
  padding: 20px 0;
  color: #888;
}
.butt {
  span {
    height: 20px;
    background-color: #eee;
    font-size: 13px;
    border-radius: 30px;
    line-height: 20px;
    padding: 2px 15px;
  }
}
.right {
  padding: 5px 15px;
  background-color: #f00;
  color: #fff;
  text-align: center;
  border-radius: 15px;
  font-size: 13px;
  width: 50px;
}
.com {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 15px;
  color: #000;
}
.van-divider::after,
.van-divider::before {
  border-width: 3px;
}
.detail {
  padding: 15px;
  .title {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    line-height: 35px;
    padding: 10px 20px;
  }
  .desc {
    text-align: end;
    line-height: 30px;
    color: #999;
    font-size: 14px;
  }
  .content {
    text-indent: 2em;
    line-height: 30px;
    font-size: 18px;
    padding-bottom: 30px;
    width: 100%;
    /deep/img {
      width: 100%;
      display: block;
    }
  }
}
.opt {
  display: flex;
  justify-content: space-around;
  .like,
  .l {
    color: red;
    font-size: 16px;
  }
  .w {
    color: rgb(84, 163, 5);
    font-size: 16px;
  }
}
.back {
  position: absolute;
  top: 15px;
  left: 15px;
  display: inline-block;
}
</style>